<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/flexible.js"></script>
    <style>
        *{
            margin: 0;padding: 0
        }
        header{
            width: 100%;
            height: 0.88rem;
            background: red
        }
    </style>
</head>
<body>
    <header></header>
</body>
</html>
<!-- 
    第一种: 媒体查询 + rem方式
        - 优点: 好理解
        - 缺点: 不精确，媒体查询代码冗余，适配一个移动端就需要写一个媒体查询

    第二种: vw + rem
        - 推算方式
        - 当设计图为640px,html{font-size:31.25vw}
        - 当设计图为750px,html{font-size:26.67vw}
        - 计算方式:当前的大小/2/100 = ?rem
        优点: 可以精确的计算，适配到常见的移动端
        总结: 在工作中建议使用这种方式

    第三种: flexible插件的方式-了解
        - 阿里系的软件都在使用这种方式
        - 针对于750px的设计图设计dpr(自动去设置dpr)
    使用方式
        - 需要把当前html文档中的视口文件给删除了
        - 引入相应的js文件
        - 计算方式 真实大小/100 = ?rem

    - vue:px2rem
    - hotcss
    - 编辑器 px=>rem
 -->